<template>
  <div style="width: 100%; height: 100vh">
    <el-button @click="getText">获取/添加文字</el-button>
<!--    <el-button @click="getOnBottom">获取/添加上下文</el-button>-->
    <el-button @click="addImage">图片</el-button>
    <div id="vabOnlyOffice" style="width: 100%; height: 100vh;"></div>
  </div>
</template>

<script>
import {getFileType} from "./wayne";

var docEditor;
var imageBase;
export default {
  name: "VabOnlyOffice",
  props: {
    option: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      doctype: "",
      aaa: '',
      //参数说明
      parameters: {
        document: {
          //文件扩展名
          fileType: "docxf",
          //key 默认置空则不走缓存 always update
          key: "",
          //为已查看或编辑的文档定义所需的文件名，该文件名在下载文档时也将用作文件名。
          title: "",
          //文件地址
          url: "",
          //相关权限
          permissions: {
            copy: true, //定义内容是否可以复制到剪贴板。如果该参数设置为false，则只能在当前文档编辑器中粘贴内容。默认值为true。
            download: true, //定义文档是可以下载还是只能在线查看或编辑。如果下载权限设置为“假”的下载为...菜单选项将是缺席的文件菜单。默认值为true。
            edit: true, //定义文档是可以编辑还是只能查看。如果编辑权限设置为“true”，则文件菜单将包含编辑文档菜单选项；请注意，如果编辑权限设置为“false”，文档将在查看器中打开，即使模式参数设置为edit，您也无法将其切换到编辑器。默认值为true。
            print: true, //定义是否可以打印文档。如果打印权限设置为“false”的打印菜单选项将是缺席的文件菜单。默认值为true
          },
        },
        //文件类型
        documentType: "word",
        height: "100%",
        width: "100%",
        editorConfig: {
          //语言：zh-CN简体中文/en英文
          lang: "en",
          //阅读状态 view/edit
          mode: "view",
          customization: {
            //是否显示插件
            plugins: false,
          },
        },
      },
    };
  },
  watch: {
    option: {
      handler: function (n) {
        this.setEditor(n);
        this.doctype = getFileType(n.fileType);
      },
      deep: true,
    },
  },
  mounted() {
    if (this.option.url) {
      this.setEditor(this.option);
    }
  },
  methods: {
    getText() {
      connector.callCommand(function () {
        let res = {}
        const oDocument = Api.GetDocument()
        const aContentControls = oDocument.GetAllContentControls()
        for (let i = 0; i < aContentControls.length; i++) {
          const control = aContentControls[i]
          // 获取标题（字段标注）
          // const label = control.GetAlias()
          // 获取标签（字段属性）
          // 获取值
          let value = null
          let prop = control.GetTag()
          console.log(prop, control)
          // if(prop == 'image') {
          //   value = control.GetElement()
          //   console.log(value.jk())
          // } else {
          //   value = control.GetContent().GetElement(0).GetText()
          // }
          res[prop] = value
        }
        // 返回表单值
        console.log(res)
      }, function () {
        console.log("callback command");
      }, true);
    },
    async getOnBottom() {
      console.log(connector)
      connector.callCommand(function () {
        var items = [
          {
            "id": "onConvert",
            "text": "Convert to Markdown or HTML"
          }
        ]

        connector.addContextMenuItem(items);
        console.log(123312123)
      }, function () {
        console.log("callback command");
      });
    },
    async getImages(){
      return new Promise((resolve)=>{
        connector.callCommand(function () {
          const oDocument = Api.GetDocument()
          const control = oDocument.GetContentControlsByTag('image')
          if (control[0].GetAllDrawingObjects().length > 0) {
            return JSON.parse(control[0].GetAllDrawingObjects()[0].ToJSON()).graphic.blipFill
              .rasterImageId
          } else {
            return ''
          }
        }, function (res) {
          resolve(res)
        });
      })
    },
    addImage(res) {
      //参考链接
      // let url = "https://t9.baidu.com/it/u=2511858320,3222661914&fm=217&app=126&size=f242,150&n=0&f=JPEG&fmt=auto?s=4BB835C347F83D8C7B2994B3030060C1&sec=1721926800&t=8503106b73ac8c343d36bfde1b0a6be0"
      // this.convertImgToBase64(url,(base64Img)=>{
      //   imageBase =  base64Img
      //   console.log(imageBase)
      // })
      // imageBase = res
      Asc.scope.images = res
      connector.executeMethod("AddContentControl", [1, {"Id" : 7, "Tag" : "image"}]);
      connector.callCommand(function () {
        // const value = imageBase
        // const value = ''
        const value = Asc.scope.images
        const oDocument = Api.GetDocument()
        // console.log(imageBase)
        const control = oDocument.GetContentControlsByTag('image')
        control[0].GetContent().RemoveElement(0)
        const oParagraph = Api.CreateParagraph()
        // console.log(base64Img)
        const oDrawing = Api.CreateImage(
          value,
          // '',
          60 * 36000,
          35 * 36000
        )
        oParagraph.AddDrawing(oDrawing)
        control[0].GetContent().AddElement(0, oParagraph)
        if (value.length === 1) {
        }
      }, function () {
        console.log("callback command");
      });
    },
    onDocumentReady() {
      window.connector = docEditor.createConnector();

      Asc.scope.text = "Hello world!";

    },
    async setEditor(option) {
      this.doctype = getFileType(option.fileType);

      let config = {
        "documentType": "word",
        "document": {
          "title": "【经营】通用合同模板.docx",
          "url": "http://192.168.5.8:81/file/6.2.4.1%E4%B8%9A%E5%8A%A1%E5%8F%8D%E9%A6%88%E5%8D%95.docx",
          "fileType": "docx",
        },
        "editorConfig": {
          "mode": "edit",
          // "callbackUrl": "https://www.onlyoffice.com:443/callback.ashx?from=office-suite",
          "lang": "zh-CN",
          "user": {
            "name": "当前用户",
            "id": "103"
          }
        }
      };
      config['events'] = {
        onDocumentReady: this.onDocumentReady
      };
      // eslint-disable-next-line no-undef,no-unused-vars
      docEditor = new DocsAPI.DocEditor("vabOnlyOffice", config);
    },
  },
};
</script>

